<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
  <div>
    <!-- 作业1开始 -->
    <div>
      <h1>欢迎光临vue开发的收银系统 水果店</h1>
      <h3>
        苹果<span>{{ dj }}</span> <span>&yen / 斤,折扣 <8折></span>
      </h3>
      <span>请输入你要购买的斤数</span
      ><input v-model.number="num" type="text" />
      <br />
      <button @click="btn1">结算账单</button>
      <br />
      <span v-model.number="zongjia">结账单:总价{{ zongjia }}元</span
      ><span v-model.number="zj">折价后:{{ zj }}元</span
      ><span v-model.number="sq">省了{{ sq }}元</span>
    </div>
    <!-- 作业1结束 -->
    <hr />
    <!-- 作业2开始 -->
    <div>
      <p>请选择你喜欢的专栏</p>
      <!-- v-model的vue变量, 值的类型  非数组 - 关联的是标签的checked(选中状态)属性 -->
      <!-- v-model的vue变量, 值的类型  数组   - 关键的是标签的value属性 -->

      <span v-for="(val, index) in arr" :key="index">
        <input v-model="arr1" type="checkbox" :value="val" />
        <span>{{ val }}</span>
      </span>
      <br />
      <ul>
        <li v-for="(val, index) in arr1" :key="index">
          {{ val }}
        </li>
      </ul>
    </div>
    <!-- 作业2结束 -->
  </div>
</template>

<!-- js相关 -->
<script>
export default {
  data() {
    return {
      // 作业1
      num: "",
      dj: 10,
      zongjia: "",
      zj: "",
      sq: "",
      // 作业2
      arr: ["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"],
      arr1: [],
      isshow: false,
    };
  },
  methods: {
    // 作业1
    btn1() {
      this.zongjia = this.dj * this.num;
      console.log(this.zongjia);
      this.zj = this.zongjia - (this.zongjia * 8) / 10;
      console.log(this.zj);
      this.sq = this.zongjia - this.zj;
      console.log(this.sq);
    },
    // 作业2
  },
};
</script>

<!-- 当前组件的样式 -->
<style>
</style>
